<!-- subpkg_consult/description/index.vue -->
<script setup>
	import { computed, ref } from 'vue'
	import { useConsultStore } from '@/stores/index.js'
	const store = useConsultStore()
	// 收集表单数据
	const illnessInfo = ref({
		illnessTime: '',
		illnessDesc: '',
		consultFlag: '',
		pictures: []
	})

	// 患病时长
	const illnessTimes = [
		{ value: 1, text: '一周内' },
		{ value: 2, text: '一月内' },
		{ value: 3, text: '半年内' },
		{ value: 4, text: '半年以上' }
	]

	// 选择患病时间
	const onIllnessTimes = (val) => {
		illnessInfo.value.illnessTime = val
	}

	// 是否就诊过
	const consultFlags = [
		{ value: 1, text: '就诊过' },
		{ value: 0, text: '没有就诊过' }
	]
	
	const query = defineProps({
		type: String,
		depId: String,
		illnessType: String
	})

	// 选择是否就诊过
	const onConsultFlag = (val) => {
		illnessInfo.value.consultFlag = val
	}

	// 通过计算属性来判断是否可以点击下一步
	const isDisabled = computed(() => {
		return (
			illnessInfo.value.illnessDesc !== '' &&
			illnessInfo.value.illnessTime !== '' &&
			illnessInfo.value.consultFlag !== ''
		)
	})

	if (store.consult.illnessDesc) {
		uni.showModal({
			title: '温馨提示',
			content: '是否恢复您之前填写的病情信息呢？',
			success: ({confirm}) => {
				if (confirm) {
					// 调用 store 里面的 consult 属性
					illnessInfo.value.illnessDesc = store.consult.illnessDesc
					illnessInfo.value.illnessTime = store.consult.illnessTime
					illnessInfo.value.consultFlag = store.consult.consultFlag

					illnessInfo.value.pictures = store.consult.pictures || []
				
				}
			}
		})
	}

	// 点击下一步
	const onNext = () => {
		if (illnessInfo.value.illnessDesc === '') {
			return uni.showToast({
				icon: 'none',
				title: '请输入患病描述'
			})
		}
		if (illnessInfo.value.illnessTime === '') {
			return uni.showToast({
				icon: 'none',
				title: '请选择患病时间'
			})
		}

		if (illnessInfo.value.consultFlag === '') {
			return uni.showToast({
				icon: 'none',
				title: '请选择是否就诊过'
			})
		}
		// const pictures = illnessInfo.value.pictures
		// // 处理图片
		// illnessInfo.value.pictures = illnessInfo.value.pictures.map(({uuid:id, url}) => {
		// 	return {
		// 		id,
		// 		url
		// 	}
		// })
		
		// console.log(11111)
		

		// 需要将数据存储到 pinia 里面
		store.setConsult(illnessInfo.value)
		store.setType(query.type)
		store.setDepId(query.depId)
		store.setIllnessType(query.illnessType)
		// 跳转页面 TODO:
		uni.navigateTo({
			url: '/subpkg_consult/patient/index'
		})
	}
</script>

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image
					src="/static/uploads/doctor-avatar-2.png"
					class="doctor-avatar"
				/>
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						type="textarea"
						:styles="{ backgroundColor: '#f6f6f6' }"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
						v-model="illnessInfo.illnessDesc"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<!-- active -->
					<text
						class="tag"
						v-for="item in illnessTimes"
						:key="item.value"
						@click="onIllnessTimes(item.value)"
						:class="{ active: item.value === illnessInfo.illnessTime }"
					>
						{{ item.text }}
					</text>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						class="tag"
						v-for="item in consultFlags"
						:key="item.value"
						@click="onConsultFlag(item.value)"
						:class="{ active: item.value === illnessInfo.consultFlag }"
					>
						{{ item.text }}
					</text>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					v-model="illnessInfo.pictures"
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
				/>
			</view>
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button class="uni-button" :disabled="!isDisabled" @click="onNext">
				下一步
			</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
